<template>
  <el-menu-item :index="menu.code" :key="menu.code" v-if="menu.leaf">
    {{menu.description}}
  </el-menu-item>
  <el-sub-menu :popper-append-to-body="false" :index="menu.code" :key="menu.code" v-else>
    <template v-slot:title>{{menu.description}}</template>
    <MenuItem :menu="childMenu" :key="childMenu.code" v-for="childMenu in menu.children"/>
  </el-sub-menu>
</template>

<script>

export default {
  name: 'MenuItem',
  mixins: [],
  components: {},
  props: {
    menu: {
      type: Object,
      default: null
    }
  }
}
</script>

<style>
  .el-menu--horizontal {
    z-index: 4;
  }
</style>
